<template>
    <div class="goods-index">
        <div class="container" v-loading="loading">
            <!-- 面包屑 -->
            <Breadcrumb :loading="loading" :goods="goods" />
            <div class="goods-base">
                <!-- 商品信息 -->
                <GoodsInfo :goods="goods" />
                <!-- 同类推荐 -->
                <GoodsRecommendation />
                <!-- 商品详情以及评价 -->
                <GoodsEvaluate />
                <!-- 注意事项 -->
                <GoodsNodes />
            </div>
        </div>
    </div>
</template>

<script setup>
import Breadcrumb from './components/breadcrumb.vue'
import GoodsEvaluate from './components/goods-evaluate.vue'
import GoodsInfo from './components/goods-info.vue'
import GoodsRecommendation from './components/goods-recommendation.vue'
import GoodsNodes from './components/goods-notes.vue'

import { useRoute } from 'vue-router'
import { onMounted, ref, watch, nextTick } from 'vue'
import { findGoodsById } from '@/apis/goods'
const loading = ref(true)
let goods = ref('')
const route = useRoute()
const findGoods = () => {
    findGoodsById(route.params.gid).then(res => {
        goods.value = res
        loading.value = false
    })
}
onMounted(() => {
    findGoods()
})
watch(
    () => route.params.gid,
    newVal => {
        if (newVal == null || newVal == undefined) {
            return
        }
        findGoods()
    },
    {
        immediate: true,
    }
)
</script>

<style lang="scss" scoped>
.goods-index {
    width: 100%;
    display: flex;
    justify-content: center;

    .container {
        height: auto;
        min-height: 800px;
        .goods-base {
            width: 100%;
            margin-top: 10px;
        }
    }
}
</style>
